<template>
  <div class="swiperBox">
    <div id="root" style="overflow: hidden">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="item in swiperList.column_banner"
            :key="item.id"
          >
            <img :src="item.banner_url" @click="$router.push({path:'/bookdetails',query:{id : item.book_id}})"/>
          </div>
        </div>
        <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
        <div class="swiper-button-prev"></div>
        <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
        <div class="swiper-button-next"></div>
        <!-- 左右遮罩层 -->
        <div class="masklayer-left"></div>
        <div class="masklayer-rigth"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper/swiper-bundle.min.js";
import "swiper/swiper-bundle.min.css";
export default {
  props: ["swiperList"],
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
      new Swiper(".swiper-container", {
        loop: true, // 循环模式选项
        loopedSlides: 5,
        autoplay: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    });
  },
  created() {
    console.log(this.swiperList, "swiperList");
  },
};
</script>
 
<style lang = "less" scoped>
.swiperBox {
  #root {
    position: relative;
  }
  .masklayer-left {
    position: absolute;
    left: -760px;
    top: 0;
    width: 760px;
    height: 380px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2;
  }
  .masklayer-rigth {
    position: absolute;
    right: -760px;
    top: 0;
    width: 760px;
    height: 380px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2;
  }
}
.swiper-container {
  overflow: visible;
  width: 760px;
  min-width: 760px;
  height: 380px;
}
.swiper-container .swiper-wrapper .swiper-slide {
  width: 760px;
  min-width: 760px;
  img{
    width: 100%;
    height: 100%;
  }
}

.swiper-container .swiper-wrapper .swiper-slide-active {
  width: 760px;
  min-width: 760px;
}
/*去掉默认样式*/
.swiper-button-prev:after {
  display: none;
}
.swiper-button-next:after {
  display: none;
}
/*自定义样式*/
.swiper-button-prev {
  position: absolute;
  z-index: 10;
  width: 32px;
  height: 79px;
  background: url("../assets/homeimg/组 7798.png");
  /* left: 280px; */
  left: -80px;
  top: 150px;
}

.swiper-button-next {
  position: absolute;
  z-index: 10;
  right: -80px;
  top: 150px;
  width: 32px;
  height: 79px;
  background: url("../assets/homeimg/组 7799.png");
  /* right: -80px;
  top: 150px; */
}
</style>